<template>
  <gd-enhance-hack-dynmic-comp
    v-if="metaItem.componentFilePath"
    :component-file-path="metaItem.componentFilePath"
    :root-path-type="metaItem.rootPathType"
    :component-props="{ ...props, curBindVal }"
    :style="allCompAttrs['style']"
    v-bind="$attrs"
    v-on="allBindEvents"
  ></gd-enhance-hack-dynmic-comp>
</template>
<script>
  export default {
    inheritAttrs: false,
    name: "DismensionGdCustomize",
  };
</script>
<script setup>
  import { toRefs, useAttrs, computed, watch } from "vue";
  import useComponentAttrs, { embeddedAtomicCompProps } from "../../useComponentAttrs";
  import useComponentEvents from "../../useComponentEvents";
  const props = defineProps({
    ...embeddedAtomicCompProps,
  });
  //组件所有属性的默认值映射
  const compAttrsKeyDefaultValueMapping = {
    style: {},
    metaConfig: {
      contentType: "CustomizeComp",
      value: {
        componentFilePath: "",
        default: "",
        componentAttr: {},
      },
    },
  };
  const { curBindVal, containerType, allCompAttrs } = useComponentAttrs({ props, compAttrsKeyDefaultValueMapping });
  const { allBindEvents, getBindSlotEvents } = useComponentEvents(props, curBindVal);

  const metaConfigValue = computed(() => {
    return allCompAttrs.value["meta-config"].value;
  });
  // 兼容旧版
  const unWatch = watch(
    metaConfigValue,
    (newVal) => {
      if (metaConfigValue.value.componentFilePath) {
        setTimeout(() => {
          unWatch();
        }, 500);
        const org = { ...props.metaItem.componentAttr };
        props.metaItem.componentAttr = { ...org, ...metaConfigValue.value.componentAttr };
        props.metaItem.rootPathType = metaConfigValue.value?.rootPathType ?? "customize";
        props.metaItem.componentFilePath = metaConfigValue.value.componentFilePath;
        setTimeout(() => {
          console.log(props.metaItem, "=====");
        }, 1000);
      }
    },
    { immediate: true }
  );
</script>
